<template>
	<view class="container">
		<view class="order">
			<me-tabs v-model="tabIndex" :tabs="tabs" :tab-width="160" :height="tab_height"></me-tabs>
			<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab,i) in tabs" :key="i">
					<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height" :api_url="api_url" v-if="canInit"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
//加载列表数据循环元素体文件：mescroll-swiper
import MescrollItem from "./order_sell/item.vue";
export default{
	components: {
	    /***** mescroll S *****/
	    //注册组件
	    MescrollItem
	    /***** mescroll E *****/
	},
	props:{
		height:{ 
			type:String, //参数名
			default: '100' ,//参数默认
		}
	},
	data(){
		return{
			/***** mescroll S *****/
			//定义tab的高度
			tab_height: 90,
			//指定tab头的api路径
			tabs_api_url: '',//'demo/swiper_tab',
			//设置列表api路径
			api_url : 'demo/swiper',
			//tab头选项（如设置了this.tabs_api_url则this.tabs为空数组即可）
			tabs:[{tabId:'t1',name:'全部'},{tabId:'t2',name:'待响应'},{tabId:'t3',name:'待收款'},{tabId:'t4',name:'待确认'},{tabId:'t5',name:'已完成'},{tabId:'t6',name:'申诉中'},{tabId:'t7',name:'已撤销'}],
			//默认tab的current下标（0，1，2，3...）
			tabIndex: 0,
			//需要固定swiper的高度
			//height: "",
			//是否可以可初始化（可以用来延时初始化，用于达到某条件时机时才触发初始化mescroll）
			canInit: true,
			/***** mescroll E *****/
			
		}
	},
	onLoad(option) {
	    var that=this;
	    /***** mescroll S *****/
	    //需要固定swiper的高度 (需减去悬浮tabs的高度)
	    //this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(this.tab_height) - uni.upx2px(210)  + 'px';
	    //api获取tab数据
	    if(this.tabs_api_url!='') {
	        this.ajax({ url: this.tabs_api_url }).then(res => {
	            this.tabs = res.data;
	        });
	    }
	    //如果带有$_GET[tabindex]参数，则指向相应的tab的current
	    if(typeof(option.tabindex)!='undefined' && option.tabindex)
	        this.tabIndex = option.tabindex;
	    //供其他页面使用的刷新事件监听：刷新当前TAB【在其他页面调用刷新的方法：uni.$emit('refreshTabs');】
	    uni.$on('refreshTabs',function(){
	        that.$refs.mescrollItem[that.tabIndex].refreshTab();//特别注意：这里需要指定tabindex的值；以及这里不能用this
	    });
	    /***** mescroll E *****/
	},
	methods:{
		/***** mescroll S *****/
		/**
		 * 当用户操作滑动内容时，更新tab头的current值
		 */
		swiperChange(e) {
		    this.tabIndex = e.detail.current
		},
		/***** mescroll E *****/
		
	}
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("create.scss");

.container  .me-tabs{
	background-color: #EEEEEF;
	padding: 0 25rpx;
	align-items: center;
	display: -webkit-flex;
	display: flex;
	.tabs-item{
		padding-bottom: 0;
	}
	.tabs-item .tab-item{
		margin-right: 19rpx;
		font-size: 28rpx;
		color: #474443s;
		height: 68rpx !important;
		line-height: 68rpx !important;
		background-color: #FEFEFE;
		border-radius: 8rpx;
	}
	.tab-item.active{
		background-color: #474443;
		color: #FEFEFE !important;
		font-weight: normal;
	}
	.tabs-line{
		display: none;
	}
}
</style>